<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html >

<html>

<head>
    <title>MyPetStore</title>
    <link rel="StyleSheet" href="css/mypetstore.css" type="text/css"
          media="screen" />
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/better-table.css">
</head>

<body>
    <div id="Header">

        <div id="Logo">
            <div id="LogoContent">
                <a href="mainForm"><img src="images/logo-topbar.gif" /></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <a href="cartForm"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
                <img align="middle" src="images/separator.gif" />
                <c:if test="${sessionScope.loginAccount == null}">
                    <a href="signOnForm">Sign in</a>
                    <img align="middle" src="images/separator.gif" />
                </c:if>

                <c:if test="${sessionScope.loginAccount != null}">
                    <a href="exitAccount">Sign out</a>
<%--                    <a href="#">Sign out</a>--%>
                    <img align="middle" src="images/separator.gif" />
                    <a href="myAccount">My Account</a>
                    <img align="middle" src="images/separator.gif" />
                </c:if>
                <a href="help.html">?</a></div>
        </div>

        <div id="Search">
            <div id="SearchContent">
                <form action="searchProduct" method="post">
                    <input type="text" name="keyword" size="14" id="keyword" autocomplete="off">
                    <input type="submit" value="Search">
                </form>
                <div id="productAutoComplete">
                    <ul id="productAutoList">
<%--                        <li class="productAutoItem">Amazon Parrot</li>--%>
<%--                        <li class="productAutoItem">Golden Retriever</li>--%>
<%--                        <li class="productAutoItem">Labrador Retriever</li>--%>
<%--                        <li class="productAutoItem">Rattlesnake</li>--%>
<%--                        <li class="productAutoItem">Chihuahua</li>--%>

                    </ul>
                </div>
            </div>
        </div>

        <div id="QuickLinks">
            <a href="categoryForm?categoryId=FISH"><img src="images/sm_fish.gif" /></a>
            <img src="images/separator.gif" />
            <a href="categoryForm?categoryId=DOGS"><img src="images/sm_dogs.gif" /></a>
            <img src="images/separator.gif" />
            <a href="categoryForm?categoryId=REPTILES"><img src="images/sm_reptiles.gif" /></a>
            <img src="images/separator.gif" />
            <a href="categoryForm?categoryId=CATS"><img src="images/sm_cats.gif" /></a>
            <img src="images/separator.gif" />
            <a href="categoryForm?categoryId=BIRDS"><img src="images/sm_birds.gif" /></a>
        </div>

    </div>
    <div id="Content">
